
<script type="text/x-template" id="hooks-triggers">
    <div>
        <cly-form-field name="trigger" :label="i18n('hooks.trigger-via')" rules="required">
            <el-select v-model="value.type" class="bu-mt-1">
				<el-option v-for="item in triggersOption" :key="item.value" :value="item.value" :label="item.label">
				</el-option>
            </el-select>
        </cly-form-field>

        <div class="bu-mt-2">
            <component
                :is="value.type"
                v-model="value.configuration"
                :hookData="$attrs.hookData"
                :app="$attrs.hookData.apps[0]"
            />
        </div>
    </div>
</script>

<script type="text/x-template" id="hooks-APIEndpointTrigger">
    <div class="hooks-APIEndpointTrigger">
        <cly-form-field name="api-endpoint" :label="i18n('hooks.trigger-api-endpoint-uri')" rules="required">
            <div class="cly-vue-drawer-hook_description">
                {{i18n('hooks.api-trigger-intro')}} 
             </div>
            <el-input v-model="value.path" placeholder="URL-Path" class="hook-api-url-block" disabled style="background-color:#FBFDFE;">
                <template v-slot:suffix	>
                    <span class='hook-trigger-url' @click="copyURL">{{i18n('hooks.copy-url')}}</span>
                    <textarea id='url-box' style='position:fixed; z-index:-1000;top:-100px;' v-model ="url"/>
                </template>
            </el-input>
        </cly-form-field>
    </div>
</script>



<script type="text/x-template" id="hooks-IncomingDataTrigger">
    <div>
        <cly-form-field name="incoming-data" :label="i18n('hooks.incoming-data')" rules="required">
            <cly-select-x
               class="cly-vue-hook-drawer__is-full-line bu-mb-1"
               placeholder="Select Trigger"
               mode="single-list"
               v-model="value.event[0]"
               @change="eventChange"
               :options="eventOptions">
            </cly-select-x>
        </cly-form-field>

        <!-- <cly-form-field-group   highlight> -->
        <div class="bu-mt-4 bu-px-4 bu-py-5 hook-filter-block">
            <div class="bu-level text-small">
                <div class="bu-level bu-level-left hooks-trigger-switch">
                    <el-switch
                        class="text-small"
                        :active-text="i18n('hooks.filter-rule')"
                        v-model="openSegmentTab"
                        active-color="#2FA732">
                    </el-switch>
                </div>
                <div class="bu-level bu-level-right">
                <span class="text-medium color-cool-gray-50">{{i18n("hooks.filtering-tips")}}</span> 
                </div>
            </div>
            
            <cly-form-field name="exclude"  v-slot:default v-if="openSegmentTab">
                <cly-qb-segmentation
                    class="hook-segmentation-block"
                    ref="qb"
                    :allowBreakdown="false"
                    :requires-minimal-segmentation="true"
                    v-model="queryObj"
                    :orGroupsEnabled="true"
                    :add-empty-row-on-empty-query="true"
                    :event="selectedEvent"
                >
                </cly-qb-segmentation>
            </cly-form-field>
        </div>
        <!-- </cly-form-field-group> -->
    </div>
</script>

<script type="text/x-template" id ="hooks-ScheduledTrigger"> 
    <div>
        <div class="cly-vue-drawer-step__section">
                <div class="text-big text-heading cly-vue-hook-drawer__no-margin">
                 {{i18n('hooks.ScheduledTrigger')}}<span class="ion ion-help-circled cly-vue-hook-drawer__small-icon cly-vue-tooltip-icon" v-tooltip.top-center=""/>
                </div>
                <div class="cly-vue-drawer-hook_description">
                {{i18n('hooks.scheduled-trigger-intro')}}
                </div>
        </div>

        <div class="cly-vue-drawer-step__section bu-pt-1">
                <div class="text-medium text-heading cly-vue-hook-drawer__no-margin">
                 Frequency <span class="ion ion-help-circled cly-vue-hook-drawer__small-icon cly-vue-tooltip-icon" v-tooltip.top-center=""/>
                </div>
                <div class="cly-vue-drawer-hook_description">
                    Recurring hook trigger will be run on periods your select below. The time will base on your Countly Server time (mostly are UTC time). 
                </div>
                <cly-select-x
                   placeholder="Select Period"
                   mode="single-list"
                   v-model="value.period1"
                   :class="{'cly-vue-hook-drawer__is-full-line':true}"
                   :options="period1Options">
                </cly-select-x>

        </div>

        <div class="cly-vue-drawer-step__section bu-mt-2" v-if="value.period1 === 'month'">
                <div class="text-medium text-heading cly-vue-hook-drawer__no-margin">
                 Day of the Month<span class="ion ion-help-circled cly-vue-hook-drawer__small-icon cly-vue-tooltip-icon" v-tooltip.top-center=""/>
                </div>
                <div class="cly-vue-drawer-hook_description">
                 Choose the day of the month you want to be triggered every month
                </div>
                <validation-provider name="trigger-schedule-day" rules="required">
                <cly-select-x
                   placeholder="Select Period"
                   mode="single-list"
                   v-model="value.period2"
                   :class="{'cly-vue-hook-drawer__is-full-line':true}"
                   :options="periodDaysOptions">
                </cly-select-x>
                </validation-provider>
        </div>

        <div class="cly-vue-drawer-step__section bu-mt-2" v-if="value.period1 === 'week'">
                <div class="text-medium text-heading cly-vue-hook-drawer__no-margin">
                 Day of the week<span class="ion ion-help-circled cly-vue-hook-drawer__small-icon cly-vue-tooltip-icon" v-tooltip.top-center=""/>
                </div>
                <div class="cly-vue-drawer-hook_description">
                 Choose the day of the week you want to be triggered every week 
                </div>
                <validation-provider name="trigger-schedule-week" rules="required">
                <cly-select-x
                   placeholder="Select Period"
                   mode="single-list"
                   :class="{'cly-vue-hook-drawer__is-full-line':true}"
                   v-model="value.period2"
                   :options="periodWeekOptions">
                </cly-select-x>
                </validation-provider>
        </div>

        <div class="cly-vue-drawer-step__section bu-mt-2" v-if="value.period1 !== null">
                <div class="text-medium text-heading cly-vue-hook-drawer__no-margin">
                 Time<span class="ion ion-help-circled cly-vue-hook-drawer__small-icon cly-vue-tooltip-icon" v-tooltip.top-center=""/>
                </div>
                <div class="cly-vue-drawer-hook_description">
                    Hook will be triggered in chosen time
                </div>
                <validation-provider name="trigger-schedule-time" rules="required">
                <cly-select-x
                   placeholder="Select Time"
                   mode="single-list"
                   :class="{'cly-vue-hook-drawer__is-full-line':true}"
                   v-model="value.period3"
                   :options="periodHoursOptions">
                </cly-select-x>
                </validation-provider>
        </div>
        
        <div class="cly-vue-drawer-step__section bu-mt-2">
                <div class="text-medium text-heading cly-vue-hook-drawer__no-margin">
                 Timezone <span class="ion ion-help-circled cly-vue-hook-drawer__small-icon cly-vue-tooltip-icon" v-tooltip.top-center=""/>
                </div>
                <div class="cly-vue-drawer-hook_description">
                    Hook will be triggered in chosen timezone
                </div>
                <validation-provider name="trigger-schedule-timezone" rules="required">
                <cly-select-x
                   placeholder="Select Period"
                   mode="single-list"
                   v-model="value.timezone2"
                   :class="{'cly-vue-hook-drawer__is-full-line':true}"
                   :options="timezoneOptions">

                    <template v-slot:option-prefix="option">
                        <div class="hook-app-selector-image" :style="option.image">
                        </div>
                    </template> 
                </cly-select-x>
                </validation-provider>

        </div>
        <span class="cly-vue-hook-drawer__is-hidden">{{cron}}</span>

    </div>

</script>

<script type="text/x-template" id="hooks-InternalEventTrigger">
    <div>
        <div class="cly-vue-drawer-step__section">
            <div class="text-medium text-heading">
            Internal action
            </div>
            <cly-select-x
               placeholder="Select an Internal Action"
               mode="single-list"
               v-model="value.eventType"
               :class="{'cly-vue-hook-drawer__is-full-line':true}"
               :options="internalEventOptions">
            </cly-select-x>

        </div>
        <div class="cly-vue-drawer-step__section" v-if="value.eventType === '/cohort/enter' || value.eventType === '/cohort/exit'  ">
            <div class="text-medium text-heading">
                Cohort
            </div>
            <validation-provider name="trigger-internal-cohort" rules="required">
            <cly-select-x
               placeholder="Select a Cohort"
               mode="single-list"
               v-model="value.cohortID"
               :class="{'cly-vue-hook-drawer__is-full-line':true}"
               :options="cohortOptions">
            </cly-select-x>
            </validation-provider>
         </div>
        <div class="cly-vue-drawer-step__section" v-if="value.eventType === '/hooks/trigger'">
            <div class="text-medium text-heading">
              Hook 
            </div>
            <validation-provider name="trigger-internal-hook" rules="required">
            <cly-select-x
               placeholder="Select a Hook"
               mode="single-list"
               v-model="value.hookID"
               :class="{'cly-vue-hook-drawer__is-full-line':true}"
               :options="hookOptions">
            </cly-select-x>
            </validation-provider>
         </div>
    </div>
</script>


